<template>
  <van-sticky><van-nav-bar title="电影" /></van-sticky>
  <div class="top-rated-wrap">
    <p class="title">最受好评电影</p>
    <div class="top-rated-list">
      <template v-for="item in toprated" :key="item.id">
        <router-link :to="{ path: '/movie/' + item.id }" class="top-rated-item">
          <div class="poster default-img-bg">
            <img :src="item.img" alt="" />
            <span class="wish-bg"></span>
            <span class="score">
              观众评分&nbsp;&nbsp;
              <span class="rated-score">{{ item.mk }}</span>
            </span>
          </div>
          <h5 class="name line-ellipsis">{{ item.nm }}</h5>
        </router-link>
      </template>
    </div>
  </div>

  <div class="list-wrap">
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 上拉加载更多 -->
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="false"
      >
        <van-cell class="list" v-for="item in Hotdata" :key="item.id">
          <img v-lazy="item.img" alt="" />
          <div>
            <h3>{{ item.nm }}</h3>
            <p>{{ item.boxInfo }}</p>
            <p>主演：{{ item.star }}</p>
            <p>{{ item.cat }}</p>
            <p>{{ item.showTimeInfo }}</p>
          </div>
          <router-link
            v-if="item.videourl"
            :to="{ path: '/movie/' + item.id }"
            class="btn"
          >
            观看
          </router-link>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getHomeHotAPI } from "@/api/movie.js";
export default {
  name: "movie",
  data() {
    return {
      Totaldata: [],
      Hotdata: [],
      toprated: [],
      // loading 表示是否正在进行上拉加载的请求
      //   每当触发 List 组件的上拉加载更多时，List 组件会自动把 loading 设为 true
      //   每当下一页的数据请求回来以后，需要程序员手动的把 loading 设为 false，
      //   否则：再次触发上拉加载更多时，不会发起请求！！
      loading: false,

      // finished 表示所有数据是否加载完毕
      //    false 表示还有下一页的数据
      //    true  表示所有数据都已加载完毕
      finished: false,
      lastnext: 1,
      // 是否正在进行下拉刷新的请求
      isLoading: false,
      scrollTop: 0,
    };
  },
  beforeRouteLeave(to, from, next) {
    from.meta.top = window.scrollY;
    next();
  },
  created() {
    // console.log(this.$route.meta)
    this.getHomeHotFun();
  },
  methods: {
    async getHomeHotFun() {
      const { data: res } = await getHomeHotAPI();
      this.Totaldata = [...res.hot];
      this.toprated = res.hot.slice(0, 10).sort(() => {
        return Math.random() > 0.5 ? -1 : 1;
      });
      this.Hotdata = this.Totaldata.slice(
        this.lastnext * 10,
        this.lastnext * 10 + 5
      );
      this.lastnext++;
    },
    loadmore(isRefresh) {
      // console.log(this.Totaldata)
      this.lastnext++;
      let nextnum = this.lastnext * 5;
      //  console.log(nextnum)
      if (isRefresh) {
        this.Hotdata = [
          ...this.Totaldata.slice(nextnum, nextnum + 5),
          ...this.Hotdata,
        ];
        this.isLoading = false;
      } else {
        this.Hotdata = [
          ...this.Hotdata,
          ...this.Totaldata.slice(nextnum, nextnum + 5),
        ];
        this.loading = false;
      }

      // console.log(this.Hotdata.length)

      if (this.Hotdata.length >= 52) {
        this.finished = true;
      }
    },
    onLoad() {
      //上拉加载
      this.loadmore();
    },
    onRefresh() {
      //下拉刷新
      this.loadmore(true);
    },
  },
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  background: #4e8ccd;
}
.van-nav-bar /deep/ .van-ellipsis {
  color: #fff !important;
}
.top-rated-wrap {
  padding: 0.2rem;
  background-color: #fff;
  margin-bottom: 0.2rem;
}
.top-rated-wrap .title {
  font-size: 0.42rem;
  color: #333;
  line-height: 1rem;
}
.top-rated-list {
  overflow: scroll;
  white-space: nowrap;
}

.top-rated-item {
  display: inline-block;
  width: 2.2rem;
  overflow: hidden;
  margin-right: 0.3rem;
}
::-webkit-scrollbar {
  display: none;
  width: 0;
}

::-webkit-scrollbar {
  height: 0 !important;
}
.top-rated-item .poster .wish-bg {
  display: block;
  width: 100%;
  height: 0.6rem;
  position: absolute;
  bottom: 0;
  z-index: 3;
  // background: #1ed9b6;
  background-image: linear-gradient(-180deg, rgba(77, 77, 77, 0), #000);
}
.top-rated-item .poster .score,
.top-rated-item .poster .wish {
  position: absolute;
  left: 0.1rem;
  bottom: 0.2rem;
  color: #faaf00;
  font-size: 0.3rem;
  font-weight: 600;
  z-index: 4;
}
.top-rated-item .poster {
  width: 2.2rem;
  height: 3rem;
  position: relative;

  // margin-bottom: 6px;
}
.top-rated-item .poster img {
  width: 100%;
  height: 100%;
}
.default-img-bg {
  background-color: #e1e1e1;
  background-size: 100% 100%;
}
.top-rated-item .poster .score {
  color: #faaf00;
  font-size: 0.3rem;
  font-weight: 600;
}

.top-rated-item .name {
  font-size: 0.36rem;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  color: #222;
  // margin: 0 0 0.6rem;
}
.line-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.list-wrap {
  border-top: 0.2rem solid #f5f5f5;
  background: #fff;
  margin-bottom: 1.5rem;
  min-height: calc(100vh);
}
.list-wrap .list {
  padding: 0.24rem 0.28rem 0.24rem 0.28rem;
  // margin-left: 1.48rem;
  // max-height: 1.8rem;
  position: relative;
}
.list-wrap .list + div {
  border-top: 1px solid #f1efef;
}

.list-wrap /deep/ .van-cell__value {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.list-wrap /deep/ .van-cell__value > div {
  flex: 1;
}

.list-wrap .list img {
  width: 2.5rem;
  height: 3.83rem;
}
.list-wrap /deep/ .van-cell__value > div {
  flex: 1;
}
.list-wrap /deep/ .van-cell__value > div {
  margin-left: 0.4rem;
}
.list-wrap /deep/ .van-cell__value > div h3 {
  font-size: 0.4rem;
  margin-bottom: 0.14rem;
}
.list-wrap /deep/ .van-cell__value > div p {
  font-size: 0.36rem;
  margin-bottom: 0.1rem;
  margin-top: 0.1rem;
}

.list-wrap .list .btn {
  width: 1.08rem;
  height: 0.56rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  background-color: #f03d37;
  color: #fff;
  white-space: nowrap;
  font-size: 0.26rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: 0.27rem;
}
</style>
